<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Elmer I Fast build Admin dashboard for any platform</title>
    <meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework."/>
    <meta name="keywords"
          content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, dwh, web app, application"/>
    <meta name="author" content="hencework"/>

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Bootstrap Wysihtml5 css -->
    <link rel="stylesheet" href="vendors/bower_components/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css"/>

    <!-- Data table CSS -->
    <link href="vendors/bower_components/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet"
          type="text/css"/>

    <!-- Custom CSS -->
    <link href="dist/css/style.css" rel="stylesheet" type="text/css">
    <!-- jQuery -->
    <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
</head>

<body>
<!--/Preloader-->
<div class="wrapper   pimary-color-blue" style="min-height: 650px">
    <!-- Main Content -->
    <!-- Row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default card-view pa-0">
                <div class="panel-wrapper collapse in">
                    <div class="panel-body pa-0">
                        <div class="contact-list">
                            <div class="row" >
                               <!-- <aside class="col-xs-1">
                                </aside>-->
                                <aside class="col-xs-1 col-md-1">
                                </aside>

                                <aside class="col-lg-10 col-md-8 pl-0">
                                    <div class="panel pa-0">
                                        <div class="panel-wrapper collapse in">
                                            <div class="panel-body  pa-0">
                                                <div class="table-responsive mb-30">
                                                    <table id="datable_1" class="table  display table-hover mb-30"
                                                           data-page-size="10">
                                                        <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>姓名</th>
                                                            <th>Email</th>
                                                            <th>电话</th>
                                                            <th>创建时间</th>
                                                            <th>修改时间</th>
                                                            <th>操作</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody> </tbody>
                                                        <aside class="col-lg-2 col-md-4 pr-0">
                                                            <div class="mt-20 mb-20 ml-15 mr-15">
                                                                <a href="#myModal" data-toggle="modal" title="Compose"
                                                                   class="btn btn-success btn-block">
                                                                    添加用户
                                                                </a>
                                                                <!-- Modal -->
                                                                <div aria-hidden="true" role="dialog" tabindex="-1" id="myModal"
                                                                     class="modal fade" style="display: none;">
                                                                    <div class="modal-dialog">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <button type="button" class="close" data-dismiss="modal"
                                                                                        aria-hidden="true">×
                                                                                </button>
                                                                                <h4 class="modal-title" >添加用户</h4>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                <form class="form-horizontal form-material" >
                                                                                    <div class="form-group">
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请输入用户名" id="addName" name="username">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="password" class="form-control"
                                                                                                   placeholder="请输入密码" id="addPwd" name="password">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="password" class="form-control"
                                                                                                   placeholder="请确认密码" id="addPwd2" >
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请填写邮箱" id="addEmail" name="email">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请填写手机号码" id="addPhone" name="phone">
                                                                                        </div>
                                                                                       <!-- <div class="form-group">
                                                                                            <span id="errMsg"></span>
                                                                                        </div>-->

                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button" class="btn btn-info waves-effect"
                                                                                        data-dismiss="modal" onclick="save()">保存
                                                                                </button>
                                                                                <button type="button" class="btn btn-default waves-effect"
                                                                                        data-dismiss="modal" >取消
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                        <!-- /.modal-content -->
                                                                    </div>
                                                                    <!-- /.modal-dialog -->
                                                                </div>
                                                                <!-- /.modal -->
                                                            </div>


                                                            <!-- Modal -->
                                                            <div aria-hidden="true" role="dialog" tabindex="-1" id="updateModal"
                                                                 class="modal fade" style="display: none;">
                                                                <div class="modal-dialog">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <button type="button" class="close" data-dismiss="modal"
                                                                                    aria-hidden="true">×
                                                                            </button>
                                                                            <h4 class="modal-title" >修改用户</h4>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <form class="form-horizontal form-material" >
                                                                                <div class="form-group">

                                                                                    <input class="hidden" id="updateId" name="updateId">

                                                                                    <div class="col-md-12 mb-20">

                                                                                        <span >用户名</span>

                                                                                        <input type="text" class="form-control"
                                                                                               id="updateName" name="updateName" >
                                                                                    </div>
                                                                                    <div class="col-md-12 mb-20">
                                                                                        <span >邮箱</span>
                                                                                        <input type="text" class="form-control"
                                                                                               placeholder="请填写邮箱" id="updateEmail" name="updateEmail">
                                                                                    </div>
                                                                                    <div class="col-md-12 mb-20">
                                                                                        <span >电话</span>
                                                                                        <input type="text" class="form-control"
                                                                                               placeholder="请填写手机号码" id="updatePhone" name="updatePhone">
                                                                                    </div>
                                                                                    <div class="form-group">
                                                                                         <span id="errMsg"></span>
                                                                                     </div>

                                                                                </div>
                                                                            </form>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-info waves-effect"
                                                                                    data-dismiss="modal" onclick="update()">更新
                                                                            </button>
                                                                            <button type="button" class="btn btn-default waves-effect"
                                                                                    data-dismiss="modal" >取消
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                    <!-- /.modal-content -->
                                                                </div>
                                                                <!-- /.modal-dialog -->
                                                            </div>
                                                            <!-- /.modal -->

                                                        </aside>
                                                    </table>
													<!--
													   分页插件
													 -->

                                                    <nav>
                                                        <ul class="pagination">
                                                            <li>
                                                                <a href="#" aria-label="Previous"  onclick="lift()">
                                                                    <span aria-hidden="true">&laquo;</span>
                                                                </a>
                                                            </li>
                                                            <!-- <li class="active"><a href="#">1</a></li>-->
                                                            <!--<li><a href="#">2</a></li>-->
                                                            <!--<li><a href="#">3</a></li>-->
                                                            <li>
                                                                <a href="#" aria-label="Next" onclick="right()" >
                                                                    <span aria-hidden="true">&raquo;</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </nav>
													
													<!-- 分页插件结束 -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </aside>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Row -->

</div>
<!-- /#wrapper -->

<!-- JavaScript -->

<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- wysuhtml5 Plugin JavaScript -->
<script src="vendors/bower_components/wysihtml5x/dist/wysihtml5x.min.js"></script>

<script src="vendors/bower_components/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.js"></script>

<!-- Fancy Dropdown JS -->
<script src="dist/js/dropdown-bootstrap-extended.js"></script>

<!-- Bootstrap Wysuhtml5 Init JavaScript -->
<script src="dist/js/bootstrap-wysuhtml5-data.js"></script>

<!-- Data table JavaScript -->
<!--<script src="vendors/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="dist/js/dataTables-data.js"></script>-->

<!-- Slimscroll JavaScript -->
<script src="dist/js/jquery.slimscroll.js"></script>

<!-- Owl JavaScript -->
<script src="vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>

<!-- Switchery JavaScript -->
<script src="vendors/bower_components/switchery/dist/switchery.min.js"></script>

<!-- Init JavaScript -->
<script src="dist/js/init.js"></script>

</body>
<script>


    var prePage = 0;//当前页的前一页
    var nextPage = 0;//当前页的后一页
    var isFirstPage = false;//是否是第一页
    var isLastPage = false;//是否是最后一页

    $(function () {
        findByPage(1);
    })

    //查询后台数据，动态展示
    function findByPage(pageNUm) {

        //每次查询的时候，都会生成新的tr li,每次方法之前要清空这两项

        $("tbody tr").remove();
        $("li[name='myli']").remove();


        //发送ajax请求，查询后台数据
        $.post("/lg_visualization/user/list.do","pageNum="+pageNUm + "&pageSize=10",function (data) {

            //初始化成员
            prePage = data.data.prePage;//当前页的前一页
            nextPage = data.data.nextPage;//当前页的后一页
            isFirstPage = data.data.isFirstPage;//是否是第一页
            isLastPage = data.data.isLastPage;//是否是最后一页

        //获取查询一页数据的list,把数据嵌套到tr td 放到body
            var list = data.data.list;

            //循环查到的每一页数据
            for (var i = 0; i < list.length; i++) {
                var $tr = $("<tr>\n" +
                    "<th>"+list[i].id+"</th>\n" +
                    "<th>"+list[i].username+"</th>\n" +
                    "<th>"+list[i].email+"</th>\n" +
                    "<th>"+list[i].phone+"</th>\n" +
                    "<th>"+list[i].createTime+"</th>\n" +
                    "<th>"+list[i].updateTime+"</th>\n" +
                    "<th>" +
                    "<a href='#updateModal' class='text-inverse pr-10' data-toggle='modal' title='Compose' " +
                    "onclick='showUser("+list[i].id+")'><i class=\"zmdi zmdi-edit txt-warning\"></i></a>" +
                    "<a href='#' class='text-inverse' title='Delete' data-toggle='tooltip' onclick='deleteById("+list[i].id+")'><i class='zmdi zmdi-delete txt-danger'></i></a>" +
                    "</th>\n" +"</tr>")

                $("tbody").append($tr);
            }

            //动态生成页码
            var tatalPage = data.data.pages;

            for (var i = 0; i < tatalPage; i++) {

                var $li = $("<li name='myli'><a href='#' onclick='findByPage("+(i+1)+")'>"+(i+1)+"</a></li>")

                //把li标签添加到页面
                $("li:last").before($li);

                if (data.data.pageNum == (i+1)){
                    $li.prop("class","active");
                }

            }

        })
    }

    //点击向左的方法
    function lift() {
        //判断是否是首页，如果是首页，return 停止方法
        if (isFirstPage){
            return;
        }
        //如果不是首页，调用findByPage(前一页)
        findByPage(prePage)
    }

    //点击向右的方法
    function right() {
        //判断是否是尾页，如果是尾页，return 停止方法
        if (isLastPage){
            return;
        }

        //如果不是尾页，调用findByPage(后一页)
        findByPage(nextPage)
    }

    function save(){

        let name = $("#addName").val();
        let pwd = $("#addPwd").val();
        let pwd2 = $("#addPwd2").val();
        let phone = $("#addPhone").val();
        let email = $("#addEmail").val();

        if(pwd != pwd2){
            $("#errMsg").val("两次密码不一致");
            return;
        }

        $.post("/lg_visualization/user/add.do",{"username":name,"password":pwd,"email":email,"phone":phone},function (data) {
            if(data.status == 0){
                alert("添加成功");
                location.reload();
            }else{
                alert("添加失败："+data.msg);
            }
        })

    }

    function deleteById(id) {

        var flag = window.confirm("您是否确定删除？")

        if (!flag){
            return;
        }

        $.post("/lg_visualization/user/deleteUser.do",{"id":id},function (data) {
            if(data.status == 0){
                alert("删除成功");
                location.reload();
            }else{
                alert("删除失败："+data.msg);
            }
        })

    }


    function showUser(id) {

        $.post("/lg_visualization/user/getInformation.do",{"id":id},function (data) {
            if(data.status == 0){
                $("#updateId").val(data.data.id)
                $("#updateName").val(data.data.username)
                $("#updatePhone").val(data.data.phone)
                $("#updateEmail").val(data.data.email)
            }else{
                alert("查询失败："+data.msg);
            }
        })
    }


    function update() {
        let id = $("#updateId").val();
        let username = $("#updateName").val();
        let phone = $("#updatePhone").val();
        let email = $("#updateEmail").val();

        let regxPhone = /^1[345678]\d{9}$/;

        if(!regxPhone.test(phone)){
            alert("手机号格式不正确！");
            return;
        }

        let regxEmail = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/;

        if(!regxEmail.test(email)){
            alert("邮箱格式不正确！");
            return;
        }

        $.post("/lg_visualization/user/update.do",{"id":id,"username":username,"email":email,"phone":phone},function (data) {
            if(data.status == 0){
                alert("修改成功");
                location.reload();
            }else{
                alert("修改失败："+data.msg);
            }
        })

    }


        
</script>
</html>
